<!--
@Description:省市区
@Author:zqy
@Date:2022-10-30 14:03:10
@Last Modified by:zqy
@Last Modified time:2022-10-30 14:03:10
-->
<template>
  <div class="cell-area-selector" :class="{'no-border':border===false}">
    <van-field
      v-model="areaName"
      :label="title"
      placeholder="省、市、区、街道"
      readonly
      :required="required"
      @click.native.stop="handleClickArea"
    >
      <div slot="right-icon" class="icon-position" />
    </van-field>
    <PopArea
      v-model="areaVal"
      :show.sync="showPop"
      :field-key="fieldKey"
      @change="handleAreaChange"
    />
  </div>
</template>

<script>
import PopArea from '@/components/PopArea'
export default {
  name: 'FieldArea',
  components: { PopArea },
  props: {
    title: {
      type: String,
      default: ''
    },
    fieldKey: {
      type: String,
      default: 'code'
    }, // 地区主键字段键名：code 地区编码 ， id 地区ID
    value: {
      type: Object,
      default: () => {
        return {
          provinceId: '',
          province: '',
          provinceCode: '',
          cityId: '',
          city: '',
          cityCode: '',
          districtId: '',
          district: '',
          districtCode: '',
          townId: '',
          town: '',
          townCode: ''
        }
      }
    },
    option: {
      type: Object,
      default: () => {
        return {
          provinceId: 'provinceId',
          province: 'province',
          provinceCode: 'provinceCode',
          cityId: 'cityId',
          city: 'city',
          cityCode: 'cityCode',
          districtId: 'districtId',
          district: 'district',
          districtCode: 'districtCode',
          townId: 'townId',
          town: 'town',
          townCode: 'townCode'
        }
      }
    },
    border: {
      type: Boolean,
      default: true
    },
    required: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showPop: false,
      areaVal: {
        provinceId: '',
        province: '',
        provinceCode: '',
        cityId: '',
        city: '',
        cityCode: '',
        districtId: '',
        district: '',
        districtCode: '',
        townId: '',
        town: '',
        townCode: ''
      }
    }
  },
  computed: {
    areaName() {
      const province = this.value[this.option.province] || ''
      const city = this.value[this.option.city] || ''
      const district = this.value[this.option.district] || ''
      const town = this.value[this.option.town] || ''
      const tmp = [province, city, district, town]
      if (town || district) {
        return tmp.join(' ')
      } else {
        return ''
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.setPopValue()
      },
      deep: true,
      immediate: true
    },
    areaVal: {
      handler(val) {
        this.handleAreaChange(val)
      },
      deep: true
    }
  },
  created() {

  },
  methods: {
    // 更新Pop省市区选中值
    setPopValue() {
      for (const key in this.areaVal) {
        const value = (this.value && this.value[this.option[key]]) || ''
        this.$set(this.areaVal, key, value)
      }
    },
    handleClickArea() {
      this.showPop = true
    },
    handleAreaChange(data) {
      const newVal = {}
      for (const key in this.option) {
        this.$set(newVal, this.option[key], data[key] || '')
      }
      this.$emit('input', newVal)
      this.$emit('change', data)
    }
  }
}

</script>
<style lang='less' scoped>
  .cell-area-selector{
    width:100%;
    padding: 14px 16px;
    position: relative;
    box-sizing: border-box;
    &::after{
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      left:16px;
      right:16px;
      bottom: 0;
      border-bottom: 1px solid #ebedf0;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
    }
    &.no-border::after{
      border-bottom: 0;
    }
    /deep/.van-cell{
      padding: 0;
      .van-field__label{
        width: auto;
        min-width: 70px;
        margin-right: 16px;
        font-size: 14px;
        color: #3C4458;
      }
      .van-field__control{
        font-size: 14px;
        color: #3C4458;
      }

      &.van-cell--required::before{
        left: -8px;
      }
    }
    /deep/ .van-field__right-icon{
      padding-right: 0;
      margin-right:0;
      display: flex;
      align-items: center;
      .icon-position{
        width: 20px;
        height: 20px;
        background: url(~@/assets/icon-map.png) no-repeat;
        background-size: 20px 20px;
      }
    }
  }
</style>
